<template>
  <div class="cashApply sys-content">
    <page-mod>
      <el-card>
        <div class="query-box">
          <el-form :model="query" inline>
            <el-form-item label="经销商编号:">
              <el-input v-model="query.dealerCode" placeholder="请输入经销商编号" clearable/>
            </el-form-item>
            <el-form-item label="提现状态:">
              <el-select v-model="query.applyStatus" placeholder="请选择" clearable>
                <el-option label="申请中" value="0" />
                <el-option label="已处理" value="1" />
              </el-select>
            </el-form-item>
          </el-form>
          <div class="btns">
            <el-button icon="Search" color="#16b777" @click="load(1)">查询</el-button>
            <el-button icon="Refresh" color="#FF5722" @click="resetSearch">重置</el-button>
          </div>
        </div>
      </el-card>
    </page-mod>
    <page-mod title="提现申请数据" icon="Histogram" :showBtn="false" :padBottom="false">
      <el-card v-loading="loading" element-loading-text="拼命加载中">
        <el-table ref="tableRef" :data="dataList" max-height="493" border>
          <el-table-column label="序号" type="index" align="center" width="60"/>
          <el-table-column label="推广人/进销商编号" prop="dealersCode" align="center"></el-table-column>
          <el-table-column label="推广人/进销商名称" prop="memberName" align="center"></el-table-column>
          <el-table-column label="提现金额" prop="amount" align="center"></el-table-column>
          <el-table-column label="提现积分" prop="tradePoint" align="center"></el-table-column>
          <el-table-column label="提现手续费" prop="tradeCharges" align="center"></el-table-column>
          <el-table-column label="开户人姓名" prop="memberName" align="center"></el-table-column>
          <el-table-column label="卡号/开户行/支行" prop="name" align="center">
            <template #default="{row}">
              <div>{{ row.bankCard }}</div>
              <div>{{ row.bank }}</div>
              <div>{{ row.branchBank }}</div>
            </template>
          </el-table-column>
          <el-table-column label="提现开户人电话" prop="phone" align="center"></el-table-column>
          <el-table-column label="提现状态" prop="applyStatus" align="center">
            <template #default="{row}">
              <el-tag :type="row.applyStatus ? 'success' : 'danger'">{{ row.applyStatus ? '已提现' : '申请中' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createdTime" align="center" width="170">
            <template #default="{row}">
              <span>{{ $date(row.createdTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="160">
            <template #default="{row}">
              <el-button type="primary" icon="View" link @click="toView(row.cashOutId)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination 
          class="paging"
          v-show="query.total"
          small
          layout="total, sizes, prev, pager, next, jumper" 
          :current-page="query.current" 
          :page-size="query.size"
          :total="query.total"
          @current-change="load"
          @size-change="sizeChange">
        </el-pagination>
      </el-card>
    </page-mod>

    <!-- 详情弹窗 -->
    <el-dialog v-model="show" fullscreen>
      <cash-apply-details :cashOutId="cashOutId" @close="show = false"></cash-apply-details>
    </el-dialog>
  </div>
</template>

<script setup name="cashApply">
  import cashApplyDetails from './details.vue'
  import { getCashApplyListPagesApi } from '@/api/api'
  import { ref, reactive, toRefs, getCurrentInstance, onActivated } from 'vue'

  // 获取注册的全局实列
  const currentThis = getCurrentInstance().appContext.config.globalProperties

  const currentData = reactive({
    loading: false,
    show: false,
    query: {
      dealerCode: '',
      applyStatus: '',
      current: 1,
      size: 20,
      total: 0
    },
    cashOutId: '',
    dataList: []
  })
  let {loading, show, query, cashOutId, dataList} = toRefs(currentData)

  // 查询
  function load(page) {
    currentData.loading = true
    currentData.query.current = page
    getCashApplyListPagesApi(currentData.query).then(res => {
      currentData.loading = false
      if(res.code === '200') {
        currentData.dataList = res.data.pages
        currentData.query.total = res.data.total
      } else {
        currentThis.$message.error(res.message)
      }
    })
  }

  function toView(cashOutId) {
    currentData.cashOutId  = cashOutId
    currentData.show = true
  }
  
  // 重置查询
  function resetSearch() {
    currentData.query.dealerCode = ''
    currentData.query.applyStatus = ''
    load(1)
  }

  // 分页每页显示条数改变执行
  function sizeChange(size) {
    currentData.query.size = size
    load(1)
  }

  onActivated(() => {
    load(currentData.query.current)
  })
</script>

<style lang="less" scoped>
.cashApply{
  :deep(.el-dialog){
    border-radius: 0 !important;
    .el-dialog__header{
      display: none;
    }
    .el-dialog__body{
      overflow: hidden auto;
      padding: 0 !important;
    }
  }
}
</style>